import { Children } from 'react';

export default function Child({ children }) {
    const style = {
        padding: 10,
        background: 'lightgreen'
    }
    // Children.toArray: 可以将react元素对象数组转换为js数组, 方便开发者调用数组相关方法
    console.log(Children.toArray(children).reverse());
    return (
        <div style={style}>
            <h1>Child</h1>
            {
                Children.map(children, (child, index) => {
                    console.log(child, index);
                    return <div style={{ color: 'red', fontWeight: 700, fontSize: 20 }}>{child}</div>
                })
            }
            <h3>Children.count: {Children.count(children)}</h3>
        </div>
    )
}
